import { defineComponent, computed } from 'vue'; // 移除ref，改用computed
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
// 移除本地图片导入（Pinia已存储baseTypes，无需重复导入）
import { Steps } from '~/src/components/Steps';
import { KEEP_VIDEO_TOP } from '~/src/config';
import router from "@/router";
import { ICardInfo } from "@/api/typing";
// 导入Pinia存储
import { useCardStore } from '@/store/modules/readCard';
import { onMounted } from 'vue';

export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
        const cardStore = useCardStore(); // 获取Pinia存储实例

        // 1. 首次加载时触发Pinia请求（仅一次）
        onMounted(() => {
            cardStore.fetchCardData();
        });

        // 2. 计算属性：从Pinia获取最终数据（空数组时自动用baseTypes）
        const finalCardTypes = computed(() => {
            // 若未加载完成，返回空数组（避免渲染异常）；加载完成后用Pinia的计算属性
            return cardStore.isLoaded ? cardStore.finalCardTypes : [];
        });

        // 3. 处理点击事件（逻辑不变）
        const handleClick = (item: ICardInfo) => {
            router.push({
                path: '/InputCard',
                query: { Card: JSON.stringify(item) }
            });
        };

        // 4. 获取图片地址（逻辑不变，数据源改为finalCardTypes）
        const getImgUrl = (item: ICardInfo) => {
            if (item.img) return item.img;
            // 从Pinia的baseTypes中匹配图片
            const match = cardStore.baseTypes.find(base => base.type === item.type);
            return match ? match.img : '';
        };

        return () => (<>
            <UserInfo></UserInfo>
            <Steps></Steps>
            <div class={Style.container_mar}>
                <div class={Style.container}>
                    <div class={Style.title}>选择登录方式</div>

                    <div class={Style.types}>
                        {/* 渲染Pinia返回的最终数据 */}
                        {finalCardTypes.value.map(item => (
                            <div
                                key={item.id}
                                class={Style.cardItem}
                                onClick={() => handleClick(item)}
                            >
                                <div style={{ width: '100%', height: '100%' }}>
                                    <div class={Style.trapezoidMaskBackground}></div>
                                    {/* 卡片图片：调用getImgUrl获取地址 */}
                                    <img class={Style.img} src={getImgUrl(item)} />
                                    <div class={Style.trapezoidMask}>
                                        <span class={Style.trapezoidText}>{item.name}</span>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </>);
    }
})
